<template>
  <div class="pdf-container" id="pdf-container">
    <div class="head" v-show="pageTotalNum > 1">
      <div class="pageNumber">
        <button class="left" @click="prePage">上一页</button>
        <button class="right" @click="nextPage">下一页</button>
      </div>
      <div class="page">{{ pageNum }} / {{ pageTotalNum }}</div>
    </div>
    <v-touch 
      v-on:swipeleft="swipeLeft" 
      v-on:swiperight="swipeRight" 
      :swipe-options="{ direction: 'horizontal' }">
      <pdf 
         id="pdf-body"
         @loaded="loadedPDF"
         @error="pdfError" 
         :src="getURL" 
         :page="pageNum"
         @progress="progress"
         @num-pages="pageTotalNum=$event"
         @page-loaded="pageNum=$event"></pdf>
    </v-touch>
    <!-- <div @click="pinchIn">缩小</div>
    v-on:pinchin="pinchIn" v-on:pinchout="pinchOut"
    <div @click="pinchOut">放大</div> -->
  </div>
</template>
<script>
import pdf from 'vue-pdf';

export default {
  name: 'VuePdfTouch',
  components: {
    pdf:pdf
  },
  props:['pdfUrl'],
  data() {
    return {
      pageNum: 1,
      pageTotalNum: 1,
      loadedRatio: 0,
      url:'',
      scale:1
    }
  },
  computed: {
    //计算属性
    getURL: function () {
      return this.url;
    },
  },
  created() {
    //可访问实例，dom还未渲染
  },
  mounted() {
      //let id = this.$route.query.id
      let url = decodeURIComponent(this.pdfUrl)  
      this.url = pdf.createLoadingTask(url)
  },
  methods: {
    loadedPDF() {
    //   this.$emit('loaded');
        this.pageNum = 1;
    },
    pdfError(e) {
      this.$emit('error', e);
    },
    progress(e) {
      if (e || e === 0) {
        this.loadedRatio = e;
      }
    },
    numPages(e) {
      if (e) {
        this.pageTotalNum = e;
      }
    },
    // 上一页
    prePage() {
    //   let page = this.pageNum
    //   page = page > 1 ? page - 1 : this.pageTotalNum
    //   this.pageNum = page
        if(this.pageNum>1){
            this.pageNum--
        }
    },
    // 下一页
    nextPage() {
    //   let page = this.pageNum
    //   page = page < this.pageTotalNum ? page + 1 : 1
    //   this.pageNum = page
      if(this.pageNum < this.pageTotalNum) {
            this.pageNum++
      }
    },
    // 左滑
    swipeLeft() {
        // eslint-disable-next-line no-console
        console.log('swipeLeft')
        this.nextPage();
    },
    // 右滑
    swipeRight() {
      this.prePage();
    },
    pinchIn(){
        if(this.scale>1){
            this.scale = this.scale / 1.1
            let body = document.getElementById("pdf-body")
            body.style.transform = "scale("+ this.scale +")"
        }
    },
    pinchOut(){
        if(this.scale<2){
            this.scale = this.scale * 1.1
            let body = document.getElementById("pdf-body")
            body.style.transform = "scale("+ this.scale +")"
        }
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
.pdf-container {
  border: 1px solid #DCDFE6;
  border-radius: 5px;
  width: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: inline-block;
  padding-top: 38px;

  .head {
    z-index: 8;
    width: 100%;
    position: absolute;
    top: 0px;
    .pageNumber {
      display: flex;
      float: left;

      .left,
      .right {
        display: inline-block;
        line-height: .1;
        white-space: nowrap;
        cursor: pointer;
        background: #FFFFFF;
        border: 1px solid #DCDFE6;
        border-color: #DCDFE6;
        color: #606266;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 400;
        padding: 12px 20px;
        font-size: 12px;
        border-radius: 3px;
        color: #fff;
        background-color: #5583FE;
        border-color: #5583FE;
      }

      .left {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
      }

      .right {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        border-left: 1px solid #DCDFE6;
      }
    }

    .page {
      font-size: 14px;
      color: #FFFFFF;
      height: 27px;
      line-height: 27px;
      width: 5rem;
      text-align: center;
      display: inline-block;
      border-radius: 5px;
      background-color: rgba(0, 0, 0, .5);
      float: right;
    }
  }
}
</style>
